<template>
  <div style="height:100%;">
    <!-- banner图 -->
    <div class="top" style="padding-top:0px;">
      <img src="./banner.png" alt="">
    </div>
    <!-- 我的服务 -->
    <div class="Kingkongarea">
      <p style="margin-bottom:5px;">{{kingKongName}}</p>
      <div class="imgs">
        <div class="imgsleft" v-for="(item,index) in list1" :key="index" :style="{'background-color': item.bgColor}">
          <img :src="item.materialIcon" alt="">
          <p>{{item.materialName}}</p>
        </div>
      </div>
    </div>
    <div class="cound">
      <!-- 我的预约 -->
      <div class="released">
        <p style="margin-bottom:5px;">{{noticeName}}</p>
        <div class="releasedtop">
          <div class="conters" v-for="(item,index1) in list2" :key="index1">
            <img :src="item.materialIcon" alt="">
            <p>{{item.materialName}}</p>
          </div>
        </div>
      </div>

      <!-- 我的资产 -->
      <div class="welfare">
        <div class="welfarefist" v-for="(item,index2) in list3" :key="index2" :style="{'background-color': item.bgColor}">
          <div>
            <p>23</p>
            <p>{{item.materialName}}</p>
          </div>
          <img :src="item.materialIcon">
        </div>
      </div>

      <!-- 用户订单 -->
      <div class="activity">
        <p style="margin-bottom:5px;">{{activityName}}</p>
        <div class="activitytop">
          <div class="actives" v-for="(item,index3) in list4" :key="index3">
            <img :src="item.materialIcon" alt="">
            <p>{{item.materialName}}</p>
          </div>
        </div>
      </div>

      <!-- 热门商品 -->
      <div class="commodity">
        <p>{{positionName}}</p>
        <div class="commoditybottom">
          <div class="hot" v-for="(item,index3) in list5" :key="index3">
            <img :src="item.goodsImageUrl" alt="" style="width:120px;height: 70px;">
            <div>
              <p class="hotfist">{{item.goodsName}}</p>
              <span style="color: #fa541c;">￥{{item.goodsMinPrice}}</span>
              <span style="color: #b3b3b3;">￥{{item.goodsMaxPrice}}</span>
            </div>
          </div>
          <div v-if="list5.length==0" style="text-align: center;">暂无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "homeLeft",
  props: ['list1', 'list2', 'list3', 'list4', 'list5', 'positionName', 'kingKongName', 'noticeName', 'activityName'],
  data () {
    return {
    };
  },
}
</script>
<style lang="scss" scoped>
.top {
  background-color: #fff;
  img {
    width: 100%;
  }
}
.cound {
  padding: 10px;
  margin-top: 62px;
}
.coundfist {
  display: flex;
  margin-bottom: 10px;
  background-color: #fff;
}
.Kingkongarea {
  background: #ffffff;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 40px;
  top: 190px;
  width: 304px;
  height: 105px;
  border-radius: 6px;
  .imgs {
    display: flex;
    width: 100%;
    justify-content: space-around;
    .imgsleft {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  img {
    width: 45px;
    height: 45px;
    margin-bottom: 5px;
  }
}
.released {
  background-color: #fff;
  padding: 10px;
  margin-top: 10px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .releasedtop {
    display: flex;
    width: 100%;
    justify-content: space-around;
    .conters {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  img {
    width: 45px;
    height: 45px;
    margin-bottom: 5px;
  }
}
.welfare {
  background-color: #fff;
  padding: 10px;
  margin-top: 10px;
  border-radius: 6px;
  display: flex;
  .welfarefist {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 64px;
    width: 138px;
    margin-right: 4px;
    img {
      width: 20px;
      height: 20px;
    }
  }
}
.activity {
  background-color: #fff;
  padding: 10px;
  margin-top: 10px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .activitytop {
    display: flex;
    width: 100%;
    justify-content: space-around;
    .actives {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  img {
    width: 45px;
    height: 45px;
    margin-bottom: 5px;
  }
}
.commodity {
  background-color: #fff;
  padding: 10px;
  margin-top: 10px;
  border-radius: 6px;
  overflow: hidden;
  clear: both;
  .commoditybottom {
    margin-top: 5px;
    overflow: hidden;
    clear: both;
    .hot {
      float: left;
      width: 50%;
      display: flex;
      margin-bottom: 5px;
      flex-direction: column;
    }
    .hotfist {
      width: 130px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
</style>
